<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery图片分页切换效果代码</title>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{background:#333;color:#eee;font-family:microsoft yahei;}

/* content */
div#content{width:700px;margin:40px auto 0 auto;}
div#content ul#itemContainer li{display:inline-block;margin:5px;zoom:1;*display:inline;}
div#content ul#itemContainer ll li img{vertical-align:bottom;width:125px;height:125px;}
.holder{margin:15px 0;text-align:center;}
.holder a{font-size:12px;cursor:pointer;margin:0 5px;color:#fff;padding:2px 5px;}
.holder a:hover{background-color:#eee;color:#FF4242;}
.holder a.jp-previous{margin-right:15px;}
.holder a.jp-next{margin-left:15px;}
.holder a.jp-current, a.jp-current:hover{color:#FF4242;font-weight:bold;}
.holder a.jp-disabled, a.jp-disabled:hover{color:#eee;}
.holder a.jp-current, a.jp-current:hover,.holder a.jp-disabled, a.jp-disabled:hover{cursor:default;background:none;}
.holder span{margin:0 5px;}
</style>  

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jPages.js"></script>
<script type="text/javascript">
$(function() {
	$("div.holder").jPages({
		containerID: "itemContainer",
		previous: "←左",
		next: "右→",
		perPage: 5
	});
});
</script>

</head>
<body>


<div id="content" class="defaults">

	<div class="holder"></div>
	
	<ul id="itemContainer">
		<li><img src="images/img (1).jpg" alt="image"></li>
		<li><img src="images/img (2).jpg" alt="image"></li>
		<li><img src="images/img (3).jpg" alt="image"></li>
		<li><img src="images/img (4).jpg" alt="image"></li>
		<li><img src="images/img (5).jpg" alt="image"></li>
		<li><img src="images/img (6).jpg" alt="image"></li>
		<li><img src="images/img (7).jpg" alt="image"></li>
		<li><img src="images/img (8).jpg" alt="image"></li>
		<li><img src="images/img (9).jpg" alt="image"></li>
		<li><img src="images/img (10).jpg" alt="image"></li>
		
		<li><img src="images/img (1).jpg" alt="image"></li>
		<li><img src="images/img (2).jpg" alt="image"></li>
		<li><img src="images/img (3).jpg" alt="image"></li>
		<li><img src="images/img (4).jpg" alt="image"></li>
		<li><img src="images/img (5).jpg" alt="image"></li>
		<li><img src="images/img (6).jpg" alt="image"></li>
		<li><img src="images/img (7).jpg" alt="image"></li>
		<li><img src="images/img (8).jpg" alt="image"></li>
		<li><img src="images/img (9).jpg" alt="image"></li>
		<li><img src="images/img (10).jpg" alt="image"></li>
		
		<li><img src="images/img (1).jpg" alt="image"></li>
		<li><img src="images/img (2).jpg" alt="image"></li>
		<li><img src="images/img (3).jpg" alt="image"></li>
		<li><img src="images/img (4).jpg" alt="image"></li>
		<li><img src="images/img (5).jpg" alt="image"></li>
		<li><img src="images/img (6).jpg" alt="image"></li>
		<li><img src="images/img (7).jpg" alt="image"></li>
		<li><img src="images/img (8).jpg" alt="image"></li>
		<li><img src="images/img (9).jpg" alt="image"></li>
		<li><img src="images/img (10).jpg" alt="image"></li>        
		
		<li><img src="images/img (1).jpg" alt="image"></li>
		<li><img src="images/img (2).jpg" alt="image"></li>
		<li><img src="images/img (3).jpg" alt="image"></li>
		<li><img src="images/img (4).jpg" alt="image"></li>
		<li><img src="images/img (5).jpg" alt="image"></li>
		<li><img src="images/img (6).jpg" alt="image"></li>
		<li><img src="images/img (7).jpg" alt="image"></li>
		<li><img src="images/img (8).jpg" alt="image"></li>
		<li><img src="images/img (9).jpg" alt="image"></li>
		<li><img src="images/img (10).jpg" alt="image"></li>
		
		<li><img src="images/img (1).jpg" alt="image"></li>
		<li><img src="images/img (2).jpg" alt="image"></li>
		<li><img src="images/img (3).jpg" alt="image"></li>
		<li><img src="images/img (4).jpg" alt="image"></li>
		<li><img src="images/img (5).jpg" alt="image"></li>
		<li><img src="images/img (6).jpg" alt="image"></li>
		<li><img src="images/img (7).jpg" alt="image"></li>
		<li><img src="images/img (8).jpg" alt="image"></li>
		<li><img src="images/img (9).jpg" alt="image"></li>
		<li><img src="images/img (10).jpg" alt="image"></li>
	</ul>

	<div class="holder"></div>
	
</div>

</body>
</html>